<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item :label="i18n('form.name','名称')" prop="name">
                        <a-input :placeholder="i18n('form.name','名称','input')" v-model="mdl.name"/>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.strategy','策略')" prop="strategy">
                        <a-radio-group :options="modeOptions" v-model="strategyObj.mode" @change="modeChange"/>
                        <div style="width: 70%">
                            <div v-if="strategyObj.mode=='one'">
                                <a-date-picker v-model="date" @change="dateChange"
                                               show-time
                                               format="YYYY-MM-DD HH:mm:ss"
                                               :placeholder="i18n('form.startTimeDesc','请选择开始时间')" />
                            </div>
                            <div v-else-if="strategyObj.mode=='day_minute'">
                                <a-select :options="minuteOptions"  :placeholder="i18n('form.timeDesc','请选择时间')" v-model="strategyObj.config.value"
                                          :getPopupContainer="(p)=>p.parentNode"></a-select>
                            </div>
                            <div v-else-if="strategyObj.mode=='day_hour'">
                                <a-time-picker format="HH:mm" :placeholder="i18n('form.timeDesc','请选择时间')" @change="dayHourChange"  v-model="day_hour"/>
                            </div>
                            <div v-else-if="strategyObj.mode=='week'">
                                <a-checkbox-group :options="weekOptions"  v-model="strategyObj.config.value"></a-checkbox-group>
                                <a-time-picker format="HH:mm" v-model="time" :placeholder="i18n('form.timeDesc','请选择时间')" @change="timeChange"/>
                            </div>
                            <div v-else-if="strategyObj.mode=='month'">
                                <div>
                                    <a-checkbox-group  v-model="strategyObj.config.value">
                                        <a-checkbox v-for="index in 31" :value="index">{{ index }}</a-checkbox>
                                    </a-checkbox-group>
                                </div>
                                <a-time-picker format="HH:mm" v-model="time" :placeholder="i18n('form.timeDesc','请选择时间')" @change="timeChange"/>
                            </div>
                            <div v-else-if="strategyObj.mode=='cron'" >
                                <a-input :placeholder="i18n('form.cron','请输入Cron表达式','input')" v-model="strategyObj.config.value"/>
                            </div>
                        </div>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.loglevel','日志级别')" prop="loglevel">
                        <a-select :options="loglevelDef" v-model="mdl.loglevel"
                                  :getPopupContainer="(p)=>p.parentNode"></a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.status','状态')" prop="status" >
                        <a-radio-group v-model="mdl.status">
                            <a-radio :value="1">{{i18n('form.enable','启用')}}</a-radio>
                            <a-radio :value="0">{{i18n('form.disable','禁用')}}</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.remark','备注')" prop="remark">
                        <a-textarea :placeholder="i18n('form.remark','备注','input')" v-model="mdl.remark" :rows="4"/>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import SysKettleJobApi from '@/api/system/core/sysKettleJob'
import {RxDialog, BaseFormModel} from "@lowcode/jpaas-common-lib";
import moment from 'moment';

export default {
    name: 'SysKettleJobEdit',
    mixins: [BaseFormModel],
    components: {
        RxDialog,
    },
    props: {
        kettleId: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            /**
             * 子表列表，以及表格属性
             */
            subTable: {},
            /**
             *
             */
            strategyObj: {mode: "one", config: {}},
            rules: {
                name: [{required: true, message: this.i18n('form.name','请输入名称','input'), trigger: 'change'}],
                strategy: [{required: true, message: this.i18n('form.strategy','请选择策略','select'), trigger: 'change'}],
                loglevel: [{required: true, message: this.i18n('form.loglevel','请选择日志级别','select'), trigger: 'change'}],
                status: [{required: true, message: this.i18n('form.status','请选择状态','select'), trigger: 'change'}],
                remark: [{required: false, message: this.i18n('form.remark','请输入备注','input'), trigger: 'change'}],
            },
            loglevelDef: [
                {label: this.i18n('form.debug','调试日志'), value: "Debug"},
                {label: this.i18n('form.error','错误日志'), value: "Error"},
                {label: this.i18n('form.nothing','无日志'), value: "Nothing"},
                {label: this.i18n('form.minimal','最小日志'), value: "Minimal"},
                {label: this.i18n('form.basic','基本日志'), value: "Basic"},
                {label: this.i18n('form.detailed','详细日志'), value: "Detailed"},
                {label: this.i18n('form.rowlevel','行级日志'), value: "Rowlevel"}
            ],
            modeOptions: [
                {label: this.i18n('form.one','一次'), value: "one"},
                {label: this.i18n('form.dayMinute','每天(分)'), value: "day_minute"},
                {label: this.i18n('form.dayHour','每天(时分)'), value: "day_hour"},
                {label: this.i18n('form.week','每周'), value: "week"},
                {label: this.i18n('form.month','每月'), value: "month"},
                {label: this.i18n('form.cron','Cron表达式'), value: "cron"},
            ],
            //分钟
            minuteOptions: [
                {label: this.i18n('form.minute1','1分钟'), value: "1"},
                {label: this.i18n('form.minute2','5分钟'), value: "5"},
                {label: this.i18n('form.minute3','10分钟'), value: "10"},
                {label: this.i18n('form.minute4','15分钟'), value: "15"},
                {label: this.i18n('form.minute5','30分钟'), value: "30"},
                {label: this.i18n('form.minute6','60分钟'), value: "60"},
            ],
            //周  MON, TUE, WED, THU, FRI, SAT,SUN,
            weekOptions: [
                {label: this.i18n('form.mon','星期一'), value: "MON"},
                {label: this.i18n('form.tue','星期二'), value: "TUE"},
                {label: this.i18n('form.wed','星期三'), value: "WED"},
                {label: this.i18n('form.thu','星期四'), value: "THU"},
                {label: this.i18n('form.fri','星期五'), value: "FRI"},
                {label: this.i18n('form.sat','星期六'), value: "SAT"},
                {label: this.i18n('form.sun','星期日'), value: "SUN"}
            ],
            //日期
            date:"",
            day_hour:"",
            //时间
            time:"",
        }

    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"SysKettleJob",key);
        },
        get(id) {
            return SysKettleJobApi.get(id);
        },
        save() {
            if(!this.mdl.kettleId){
                this.mdl.kettleId = this.kettleId;
            }
            return SysKettleJobApi.save(this.mdl);
        },
        modeChange(){
            this.strategyObj.config={};
            this.time="";
        },
        timeChange(value){
            var time="";
            if(value){
                time=moment(value).format("H:m");
            }
            this.$set(this.strategyObj.config,"time",time);
            this.setStrategy();
        },
        dateChange(value){
            var date="";
            if(value){
                date=moment(value).format("YYYY-M-D H:m:s");
            }
            this.$set(this.strategyObj.config,"value",date);
        },
        dayHourChange(value){
            var date="";
            if(value){
                date=moment(value).format("H:m");
            }
            this.$set(this.strategyObj.config,"value",date);
        },
        setStrategy(){
            if((this.strategyObj.mode== 'week' || this.strategyObj.mode== 'month') && !this.strategyObj.config.time){
                this.strategyObj.config.time="0:0"
            }
            this.$set(this.mdl,"strategy",JSON.stringify(this.strategyObj));
        }

    },
    watch:{
        "strategyObj.config.value":function (val,oldVal){
            if(val){
                this.setStrategy();
                if(this.strategyObj.mode== 'one'){
                    this.date=moment(val,"YYYY-M-D H:m:s");
                }else if(this.strategyObj.mode== 'day_hour'){
                    this.day_hour=moment(val,"H:m");
                }
            }
        },
        "mdl.strategy":function (val,oldVal){
            if(oldVal==undefined){
                this.strategyObj=JSON.parse(val);
            }
        },
        "strategyObj.config.time":function (val,oldVal){
            if(val){
                this.time=moment(val,"H:m");
            }
        }
    }
}
</script>
<style>
.relick a {
    margin-right: 10px;
}

</style>
